:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

h1 {
  font-size: 3.2em;
  line-height: 1.1;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.card {
  padding: 2em;
}

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #ffffff;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}

/* 全局对话框样式 */
.el-dialog {
  border-radius: 8px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #ebeef5 !important;
}

.el-dialog__header {
  background-color: #ffffff !important;
  margin: 0 !important;
  padding: 15px 20px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.el-dialog__title {
  color: #333333 !important;
  font-weight: 600 !important;
}

.el-dialog__headerbtn .el-dialog__close {
  color: #909399 !important;
}

.el-dialog__body {
  background-color: #ffffff !important;
  color: #333333 !important;
  padding: 20px !important;
}

.el-dialog__footer {
  background-color: #ffffff !important;
  border-top: 1px solid #f0f0f0 !important;
  padding: 10px 20px !important;
}

/* 确保对话框中的表单元素使用深色文本 */
.el-dialog .el-form-item__label,
.el-dialog .el-checkbox__label,
.el-dialog .el-radio__label,
.el-dialog .el-input__inner,
.el-dialog .el-textarea__inner,
.el-dialog .el-select-dropdown__item,
.el-dialog .el-tabs__item {
  color: #333333 !important;
}

.el-dialog .el-tabs__item.is-active {
  color: var(--el-color-primary) !important;
}

.el-dialog .el-tabs__nav-wrap::after {
  background-color: #e4e7ed !important;
}

/* 对话框中的搜索结果项样式 */
.el-dialog .search-result-item:hover {
  background-color: #f5f7fa !important;
}

.el-dialog .result-title {
  color: #333333 !important;
}

.el-dialog .result-description {
  color: #666666 !important;
}

/* 确保对话框中的复选框和标签在白色背景下有正确的颜色 */
.el-dialog .el-checkbox {
  --el-checkbox-checked-text-color: #333333;
  --el-checkbox-checked-border-color: var(--el-color-primary);
  --el-checkbox-checked-bg-color: var(--el-color-primary);
  --el-checkbox-text-color: #333333;
}

.el-dialog .el-checkbox__label {
  color: #333333 !important;
}

.el-dialog .el-tag {
  border-color: #e9e9eb;
}

.el-dialog .search-options {
  margin: 15px 0;
}

.el-dialog .el-input__inner {
  color: #333333 !important;
}

.el-dialog .el-input__wrapper {
  background-color: #ffffff !important;
  border: 1px solid #dcdfe6 !important;
}

.el-dialog .el-button {
  border: 1px solid #dcdfe6;
}

/* 确保对话框中的列表项有正确的样式 */
.el-dialog .el-list-item {
  border-bottom: 1px solid #f0f0f0;
  padding: 10px 0;
}

.el-dialog .el-list-item:last-child {
  border-bottom: none;
}

/* 统一二级文本框背景色为白色 */
.el-textarea__inner,
.el-input__inner,
.el-input__wrapper {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.el-textarea .el-textarea__inner {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.el-input .el-input__wrapper {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}

/* 确保在深色模式下也保持白色背景 */
.dark .el-textarea__inner,
.dark .el-input__inner,
.dark .el-input__wrapper {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.dark .el-textarea .el-textarea__inner {
  background-color: #ffffff !important;
  color: #333333 !important;
}

.dark .el-input .el-input__wrapper {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1px #dcdfe6 inset !important;
}

/* 确保二级文本框中的文字颜色为深色 */
.el-textarea__inner::placeholder,
.el-input__inner::placeholder {
  color: #909399 !important;
}

/* 聚焦状态下的样式 */
.el-textarea.is-focused .el-textarea__inner,
.el-input.is-focused .el-input__wrapper {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 1px var(--el-color-primary) inset !important;
}

/* 确保对话框中的文本框也是白色背景 */
.el-dialog .el-textarea__inner,
.el-dialog .el-input__inner,
.el-dialog .el-input__wrapper {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 确保表单中的文本框也是白色背景 */
.el-form-item .el-textarea__inner,
.el-form-item .el-input__inner,
.el-form-item .el-input__wrapper {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 确保下拉菜单中的搜索框也是白色背景 */
.el-select-dropdown .el-input__wrapper,
.el-select-dropdown .el-input__inner {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 确保日期选择器中的输入框也是白色背景 */
.el-date-editor .el-input__wrapper,
.el-date-editor .el-input__inner {
  background-color: #ffffff !important;
  color: #333333 !important;
}

/* 确保禁用状态下的输入框也是白色背景，但有灰色文本 */
.el-input.is-disabled .el-input__wrapper,
.el-textarea.is-disabled .el-textarea__inner {
  background-color: #f5f7fa !important;
  color: #909399 !important;
}
